import {DatePicker} from 'antd'
import dayjs from 'dayjs'
import {useState} from 'react'

const {RangePicker} = DatePicker

function MyDatePicker({
                          selectedDateString,
                          setSelectedDateString,
                          initialDate
                      }) {
    // 保存选择的日期
    const [selectedDate, setSelectedDate] = useState()

    const rangePresets = [
        {
            label: '最近一周',
            value: [dayjs().add(-7, 'd'), dayjs()]
        },
        {
            label: '最近一个月',
            value: [dayjs().add(-30, 'd'), dayjs()]
        },
        {
            label: '最近三个月',
            value: [dayjs().add(-90, 'd'), dayjs()]
        }
    ]
    // 日期切换获取日期
    const onRangeChange = (dates, dateStrings) => {
        if (dates && selectedDateString !== dateStrings[0]) {
            // console.log('From: ', dates[0], ', to: ', dates[1])
            // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
            setSelectedDate(dates)
            setSelectedDateString(dateStrings)
            console.log(dateStrings)
        } else {
            // setSelectedDate(null)
        }
    }
    return (
        <RangePicker
            value={selectedDate}
            presets={rangePresets}
            onChange={onRangeChange}
        />
    )
}

export default MyDatePicker
